<template>
  <view class="daylist">
    <custom-head-top>
      <template #left>每日推荐</template>
    </custom-head-top>
    <view class="grid">
      <view class="item add" @click="add"> + </view>
      <view class="item" v-for="item in daylist" :key="item._id">
        <day-item :item="item" @update="getDays" />
      </view>
    </view>
    <view class="paging">
      <uni-pagination
        :total="params.total"
        :page-size="params.pageSize"
        :current="params.currentPage"
        @change="handlePageChange"
        :show-icon="true"
      />
    </view>
  </view>
</template>

<script setup>
import customHeadTop from '@/components/cunstom-head-top/custom-head-top.vue';
import dayItem from './children/DayItem.vue';
import { routerTo } from '@/utils/common';
import { onMounted, ref } from 'vue';
uni.$on('daySuccess',()=>{
	getDays()
});
const dayCloudObj = uniCloud.importObject('admin-activity-everyday');
const daylist = ref([]);
const params = ref({
  total: 0,
  currentPage: 1,
  pageSize: 5,
});
const getDays = async () => {
  const res = await dayCloudObj.list(params.value);
  if (res.errCode === 0) {
    daylist.value = res.data;
    params.value.total = res.count;
  }
};
const add = () => {
  routerTo('/pages/activity/dayadd');
};
const handlePageChange = (e) => {
  params.value.currentPage = e.current;
  getDays();
};
onMounted(() => {
  getDays();
});
</script>

<style lang="scss" scoped>
.daylist {
  .grid {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    .item {
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      min-height: 200px;
      background-color: #fff;
      overflow: hidden;
    }
    .item.add {
      background-color: #f8f8f8;
      font-size: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #999;
      cursor: pointer;
    }
    .item:hover {
      border-color: #1f1f1f;
    }
  }
}
</style>
